<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./select.css">
</head>

<body>
    <script>
        window.onload = function() {
            let oUl = document.querySelectorAll("li");
            let oPic = document.querySelectorAll("img");
            console.log(oUl.length + "1111");



            function Person() {

            }
            Person.prototype.fn = function(args, list) {
                console.log(111);
                console.log(args.length);
                for (var i = 0; i < args.length; i++) {
                    console.log(list);
                    console.log(i);
                    (function(i) {
                        args[i].onclick = function() {
                            list[i].style.display = "block";
                            for (var j = 0; j < list.length; j++) {
                                if (j != i) {
                                    list[j].style.display = "none";
                                }
                            }
                        }
                    })(i);
                }
            }
            let a = new Person();
            console.log(a);
            a.fn(oUl, oPic);
        }



        // window.onload = function() {
        //     var oUl = document.querySelectorAll("li");
        //     var oPic = document.querySelectorAll("img");
        //     for (var i = 0; i < oUl.length; i++) {
        //         (function(i) {
        //             oUl[i].onclick = function() {
        //                 console.log(i);
        //                 oPic[i].style.display = "block";
        //                 for (var j = 0; j < oPic.length; j++) {
        //                     if (j != i) {
        //                         oPic[j].style.display = "none";
        //                     }
        //                 }
        //             }
        //         })(i);
        //     }
        // }
    </script>
    <div id="box">
        <nav>
            <ul>
                <li><a href="#">导航一</a></li>
                <li><a href="#">导航二</a></li>
                <li><a href="#">导航三</a></li>
            </ul>
        </nav>
        <div id="pic">
            <img src="./image/1.jpg">
            <img src="./image/2.jpg">
            <img src="./image/3.jpg">
        </div>
    </div>
</body>

</html>